<template>
  <div class="box">
    <div class="l-box">
      <div :class="['menu',menuChose === 1?'menuAct':'']" @click="changeMenu(1)">{{ nav.PersonData }}</div>
      <div :class="['menu',menuChose === 2?'menuAct':'']" @click="changeMenu(2)">{{ nav.YourAddress }}</div>
      <div :class="['menu',menuChose === 3?'menuAct':'']" @click="changeMenu(3)">{{ nav.Tracks }}</div>
    </div>
    <PageMinePersonal v-if="menuChose === 1" />
    <PageMineAddress v-if="menuChose === 2" />
    <PageMineTracks v-if="menuChose === 3" />
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type Tpage = {
  name: string;
  seoDTO: Tseo;
};
const { nav } = language;

let menuChose = ref(1);

const changeMenu = (item:number) =>{
  menuChose.value = item;
}
const getPage = async () => {
  const { data } = await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: 'myprofile',
    },
  });
  useHead({
    title: data.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.keyword + "," + data?.seoDTO?.meta + "," + data?.seoDTO?.headTag,
      },
    ],
  });
};
onMounted(() => {
  getPage();
});
</script>

<style lang="stylus" scoped>
.box{
  width:1080px;
  margin:0 auto;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:36px 28px;
  box-sizing:border-box;
  .l-box{
    margin-right:98px
    .menu{
      height:22px;
      line-height:22px;
      padding-left:21px;
      box-sizing:border-box;
      font-weight: 300;
      font-size: 20px;
      color: #999;
      border-left:3px solid #fff;
      margin-bottom:20px
      cursor pointer
    }
    .menuAct{
      border-left:3px solid #000;
      color: #000;
    }
  }
}
</style>
